<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        :btn-list="fullInfo.btnList"
        :needReturn="!flowFormType"
        @returnBack="$emit('returnModify')"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t("basic_information") }}</p>
          </div>
          <div class="model-panel-body">
            <page-form
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :data="formInfo.data"
              :field-list="formInfo.fieldList"
              :label-width="formInfo.labelWidth"
              :rules="formInfo.rules"
            >
             <template v-slot:form-deptName>
                <el-input
                  v-model="formInfo.data.deptName"
                  class="not-mongolia"
                  type="input"
                  :required="true"
                  :disabled="true"
                  :placeholder="'请选择部门'"
                >
                  <template #append>
                    <el-icon @click="checkDeptName"><MoreFilled /></el-icon>
                  </template>
                </el-input>
              </template>
              <template v-slot:form-mainFileUrlList>
              <UploadImg
                v-model:value="formInfo.data.mainFileUrlList"
                :action="action"
                list-type="picture-card"
                title="附件"
                multiple
                :limit="10"
                :file-type="fileType"
                :response-fn="handleResponse"
              />
            </template>
            </page-form>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <!-- 选择部门 -->
    <SelectDept
      v-if="useDeptInfo.visible"
      v-model:show-dialog="useDeptInfo.visible"
      :check-box="false"
      :highlight-row="true"
      :query="useDeptInfo.query"
      :save-empty="true"
      @callback="callbackUseDept"
    />
  </div>
</template>

<script setup name="deviceTrialManageModify">
import PageForm from "@/components/PageForm/index";
import { addTrialPage, updateTrialPage, getTrialById, createAssetTrialAndSave,flowSubmitAssetTrial } from "@/api/asset.js";
import moment from "moment";
import utils from '@/common/js/utils'
const { proxy } = getCurrentInstance();
const emit = defineEmits();
import axios from 'axios'
const props = defineProps(["visible", "id", "title",'flowFormType']);
const action = ref(axios.defaults.baseURL + '/pub/uploadfile')
const fileType = ref(['png', 'jpg', 'jpeg','pdf'])
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    { label: "试用科室",value: "deptName",type: "slot"},
    { label: "试用开始日期", value: "trialStartDate", type: "date" },
    { label: "试用截止日期", value: "trialEndDate", type: "date" },
    { label: "设备名称", value: "assetName", type: "input" },
    { label: "规格", value: "standard", type: "input" },
    { label: "序列号", value: "sequenceNo", type: "input" },
    { label: "注册证号", value: "registerCode", type: "input" },
    { label: "生产厂家", value: "brandName", type: "input" },
    { label: "生产日期", value: "productionDate", type: "date" },
    { label: "供应商", value: "supplierName", type: "input" ,maxLength: 32},
    { label: "安装日期", value: "installDate", type: "date" },
    { label: "安装地点", value: "installLocation", type: "input" },
    { label: "联系人", value: "contact", type: "input" },
    { label: "联系电话", value: "phone", type: "input" },
    { label: "附件", value: "mainFileUrlList",type: 'slot',
      className: 'not-br', },
    { label: "设备描述", value: "remark", type: "textarea", className: 'not-br', maxLength: 2000 },
    { label: "试用方案", value: "trialPlan", type: "textarea", className: 'not-br',maxLength: 2000 },

  ],
  rules: {
    deptName: [
      { required: true, message: "请选择试用科室", trigger: "change" },
    ],
    trialStartDate: [
      { required: true, message: "请选择试用开始日期", trigger: "change" },
    ],
    trialEndDate: [
      { required: true, message: "请选择试用截止日期", trigger: "change" },
    ],
    assetName: [
      { required: true, message: "请输入设备名称", trigger: "blur" },
    ],
    standard: [
      { required: true, message: "请输入规格", trigger: "blur" },
    ],
    phone: [
      { required: false,validator: proxy.$validate.cellphone, message: "请输入正确的联系电话", trigger: "blur" },
    ],
  },
  labelWidth: "180px",
});
const fullInfo = ref({
  btnList: [{ label: "保存", event: save, show: !props.flowFormType },{ label: "保存并提交", event: saveAndSubmit, show: !props.id && !props.flowFormType }],
});

const showDialog = computed({
  get() {
    return props.visible;
  },
  set(newValue) {
    emit("update:visible", newValue); // 更新父组件visible
  },
});
const useDeptInfo = ref({
  visible: false,
  query: {
    status: 1,
    deptAuth: 'id',
  },
})
onMounted(() => {
  if (props.id) {
    getDetails();
  }
});
function handleResponse(response, file) {
  return file
}
function checkDeptName() {
  useDeptInfo.value.visible = true
}

function callbackUseDept(data) {
  if (data && data.id) {
    formInfo.value.data.deptName = data.name
    formInfo.value.data.deptId = data.id
  } else {
    formInfo.value.data.deptName = ''
    formInfo.value.data.deptId = -2
  }
}
function saveAndSubmit(flowData) {
  save(true, flowData)
}
function save(isSaveAndSubmit, obj = {}) {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      let api = props.id ? updateTrialPage : isSaveAndSubmit === true ? createAssetTrialAndSave : addTrialPage;
      let flowParams = formInfo.value.data
      if (isSaveAndSubmit === true) {
        if (proxy.$route.query.processInstanceId) {
          api = flowSubmitAssetTrial
        }
        flowParams = {
          orderData: flowParams,
          // flowTaskCommentDto和processDefinitionKey为审批流程需要传递的参数
          flowTaskCommentDto: { approvalType: 'submit' },
          processDefinitionKey: 'assetTrial',
          processInstanceId: obj.processInstanceId,
          taskId: obj.taskId,
        }
      }
      api(flowParams).then((res) => {
        if (res && res.success) {
          showDialog.value = false
          emit('returnModify')
        }
      });
    }
  });
}
function getDetails() {
  getTrialById(props.id).then((resp) => {
    if (resp && resp.success) {
      let data = resp.data;
      formInfo.value.data = data;
    }
  });
}
defineExpose({
  save,
  saveAndSubmit,
})
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  // flex: 1;
}
.flex-select :deep(.el-input--small .el-input__inner) {
  height: 28px !important;
}
:deep(.patrolPlan-checkbox) {
  padding: 0 5px 5px 5px;
  box-sizing: border-box;
  .el-checkbox-button__inner {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
:deep(.el-checkbox-button__inner) {
  border: 1px solid #dcdfe6 !important;
}
</style>
